{% extends "base.html" %}

{% block subtitle %}
  Widget Repository
{% endblock subtitle %}

{% block content %}
<div ng-controller="WidgetRepository">

  {% if not iframed %}
    <h3>Oppia Widget Repository</h3>
    <br>
  {% endif %}

  <div class="tabbable tabs-left">
    <ul class="nav nav-tabs">
      <li ng-repeat="(category, widgetList) in widgets" ng-class="{active: $index == 0}">
        <a data-toggle="tab" href="#<[category|spacesToUnderscores]>"><[category]></a>
      </li>
    </ul>

    <div class="tab-content">
      <div ng-repeat="(category, widgetList) in widgets" class="tab-pane" ng-class="{active: $index == 0}" id="<[category|spacesToUnderscores]>">
        <div class="container-fluid">
          <div class="row-fluid">

            <div class="accordion-group" ng-repeat="widget in widgetList">
              <div style="margin: 10px">
                <span class="pull-right">
                  <a href="#" onclick="return false;" ng-click="previewWidget(category, $index)">Preview</a> |
                  <a href="#" onclick="return false;" ng-click="selectWidget(category, $index)">Use</a>
                </span>
                <h5><[widget.name]></h5>
                <i><[widget.description]></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div>
      <iframe id="widgetPreview" frameborder="0" width="100%" height="500px"></iframe>
    </div>
  </div>

</div>

<script>
  var WidgetRepositoryConfig = {};
  {% if interactive %}
    WidgetRepositoryConfig['interactive'] = true;
  {% endif %}
  {% if parent_index is defined %}
    WidgetRepositoryConfig['parent_index'] = {{parent_index}}
  {% endif %}
</script>

{% endblock %}

{% block footer_js %}
  {{ super() }}
  <script>
    {{ include_js_file('editor/WidgetRepository.js') }}
  </script>
{% endblock footer_js %}
